<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="lib/layui/layui/layui.js"></script>
<link rel="stylesheet" href="lib/layui/css/layui.css">
</head>
<body>
	<a class="layui-btn layui-btn-small"
		style="line-height: 1.6em; margin-top: 3px; float: right"
		href="javascript:location.replace(location.href);" title="刷新"> <i
		class="layui-icon" style="line-height: 30px">ဂ</i>
	</a>
	<div class="x-body">
		<!-- 查询 -->	
		<form class="layui-form" action="" onsubmit="return false">
			<div class="layui-form-item">
				<div class="layui-inline">
				<label class="layui-form-label">身份</label>
					<div class="layui-input-inline">
						<select id="category" name="category" lay-filter="categorys">
							<option value="">请选择身份~</option>
							<option value="0">学生</option>
							<option value="1">老师</option>
						</select>
					</div>
					
					<label id="departments" class="layui-form-label">系部</label>
					<div id="departmentss" class="layui-input-inline">
						<select id="department" name="department">
							<option value="">请选择系部~</option>
							<option value="贸易经济系">贸易经济系</option>
							<option value="粮食工程系">粮食工程系</option>
							<option value="机电工程系">机电工程系</option>
							<option value="商务外语系">商务外语系</option>
						</select>
					</div>
					<label id="professions" class="layui-form-label">专业</label>
					<div id="professionss" class="layui-input-inline">
						<select id="profession" name="profession">
							<option value="">请选择专业~</option>
							<option value="网络营销">网络营销</option>
							<option value="市场营销">市场营销</option>
							<option value="软件开发">软件开发</option>
							<option value="软件测试">软件测试</option>
						</select>
					</div>
					<label id="grades" class="layui-form-label">年级</label>
					<div id="gradess" class="layui-input-inline">
						<select  id="grade" name="grade">
							<option value="">请选择年级~</option>
							<option value="18级">18级</option>
							<option value="19级">19级</option>
							<option value="20级">20级</option>
							<option value="21级">21级</option>
						</select>
					</div>
					<label class="layui-form-label">姓名</label>
						<div class="layui-input-inline">
							<input type="text" id="name" name="name" placeholder="请输入姓名" autocomplete="off"
								class="layui-input" width="10">
					</div>
					<label class="layui-form-label">会员卡号</label>
					<div class="layui-input-inline">
						<input type="text" id="card_no" name="card_no" placeholder="请输入会员卡号" autocomplete="off"
							class="layui-input">
					</div>
					
					<label class="layui-form-label">用户状态</label>
					<div class="layui-input-inline">
						<select id="status" name="status">
							<option value="">请选择状态~</option>
							<option value="0">空闲</option>
							<option value="1">学习中</option>
						</select>
					</div>
					<label class="layui-form-label">手机号</label>
					<div class="layui-input-inline">
						<input type="text" id="phone" name="phone" placeholder="请输入手机号" autocomplete="off"
							class="layui-input">
					</div>
					<label class="layui-form-label">入会日期</label>
		
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="beginRegdate" name="beginRegdate"
							placeholder="yyyy-MM-dd HH:mm:ss">
					</div>
		            <div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" id="endRegdate" name="endRegdate"
							placeholder="yyyy-MM-dd HH:mm:ss">
					</div>
					
					<div class="layui-input-inline">
						<button type="submit" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="" lay-filter="chaxun">查询</button>
						<button type="submit" class="layui-btn layui-btn-radius layui-btn-danger" lay-submit="" lay-filter="tianjia">添加成员</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<!-- 添加 -->
	<div id="add_div" style="display: none">
		<form id="add_form" class="layui-form" lay-filter="add_form"
			action="" onsubmit="return false">
			<div class="layui-form-item">
				<div class="layui-inline">
					 <label class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" name="name"
							autocomplete="off" class="layui-input">
					</div>

					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<select name="sex">
							<option value="">请选择性别~</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<label class="layui-form-label">会员卡号</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" id="card_nos" name="card_no"
							autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">身份证号</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" id="cards" name="card"
							autocomplete="off" class="layui-input">
					</div>
					<label id="departmenta" class="layui-form-label">系部</label>
					<div id="departmentaa" class="layui-input-inline">
						<select name="department">
							<option value="">请选择系部~</option>
							<option value="贸易经济系">贸易经济系</option>
							<option value="粮食工程系">粮食工程系</option>
							<option value="机电工程系">机电工程系</option>
							<option value="商务外语系">商务外语系</option>
						</select>
					</div>
					<label id="professiona" class="layui-form-label">专业</label>
					<div id="professionaa" class="layui-input-inline">
						<select name="profession">
							<option value="">请选择专业~</option>
							<option value="网络营销">网络营销</option>
							<option value="市场营销">市场营销</option>
							<option value="软件开发">软件开发</option>
							<option value="软件测试">软件测试</option>
						</select>
					</div>
					<label id="gradea" class="layui-form-label">年级</label>
					<div id="gradeaa" class="layui-input-inline">
						<select name="grade">
							<option value="">请选择年级~</option>
							<option value="18级">18级</option>
							<option value="19级">19级</option>
							<option value="20级">20级</option>
							<option value="21级">21级</option>
						</select>
					</div>
					<label class="layui-form-label">电话</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" name="phone"
							autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">备注</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" name="remark"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">身份</label>
					<div class="layui-input-inline">
						<select id="categorya" name="category" lay-filter="aihao" lay-filter="categoryaad">
							<option value="">请选择身份~</option>
							<option value="0">学生</option>
							<option value="1">老师</option>
						</select>
					</div>

				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<button id="add" type="submit"
							class="layui-btn layui-btn-radius layui-btn-danger" lay-submit=""
							lay-filter="add">确认添加</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改 -->
	<div id="update_div" style="display: none">
		<form id="update_form" class="layui-form" lay-filter="update_form"
			action="" onsubmit="return false">
			<div class="layui-form-item">
				<div class="layui-inline">
					<input type="tel" id="id" name="id" style="display: none"
						autocomplete="off" class="layui-input"> <label
						class="layui-form-label">姓名</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" name="name"
							autocomplete="off" class="layui-input">
					</div>

					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<select name="sex">
							<option value="">请选择性别~</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<label class="layui-form-label">系部</label>
					<div class="layui-input-inline">
						<select name="department">
							<option value="">请选择系部~</option>
							<option value="贸易经济">贸易经济系</option>
							<option value="粮食工程">粮食工程系</option>
							<option value="机电工程">机电工程系</option>
							<option value="商务外语">商务外语系</option>
						</select>
					</div>
					<label class="layui-form-label">专业</label>
					<div class="layui-input-inline">
						<select name="profession">
							<option value="">请选择专业~</option>
							<option value="网络营销">网络营销</option>
							<option value="市场营销">市场营销</option>
							<option value="软件开发">软件开发</option>
							<option value="软件测试">软件测试</option>
						</select>
					</div>
					<label class="layui-form-label">年级</label>
					<div class="layui-input-inline">
						<select name="grade">
							<option value="">请选择年级~</option>
							<option value="18级">18级</option>
							<option value="19级">19级</option>
							<option value="20级">20级</option>
							<option value="21级">21级</option>
						</select>
					</div>
					<label class="layui-form-label">电话</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" name="phone"
							autocomplete="off" class="layui-input">
					</div>
					<label class="layui-form-label">备注</label>
					<div class="layui-input-inline">
						<input lay-verify="" type="tel" name="remark"
							autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">身份</label>
					<div class="layui-input-inline">
						<select name="category" lay-filter="aihao" >
							<option value="0">学生</option>
							<option value="1">老师</option>
						</select>
					</div>

				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<button type="submit" id="update"
							class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
							lay-submit="" lay-filter="update">确认修改</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div>
		<form action="importMe" method="post" enctype="multipart/form-data">
			<div class="layui-form-item">
				<div class="layui-input-inline" style="width: 130px;">
					<input type="file" name="file" />
					<p>
				</div>
				<div class="layui-input-inline" style="width: 130px;">
					<input style="margin-left: 100px" type="submit" value="导入文件" />
					<p>
				</div>
			</div>
		</form>
	</div>
	<xblock>
	<button class="layui-btn layui-btn-danger" onclick="delMenbers()">
		<i class="layui-icon">&#xe640;</i>批量删除
	</button>
	</xblock>
	<button type="submit" class="layui-btn" lay-submit=""
		lay-filter="daoChu">导出文件</button>
	<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">重置</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
var table,form,layer,laydate,$;
	layui.use([ 'table' , 'form', 'layer','laydate' ], function(){
	     table = layui.table;
		 form = layui.form;
		 layer = layui.layer;
		 laydate = layui.laydate;
		 $ = layui.$;
	
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,id:'tableTab'
	    ,url: 'getAll' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	    {type:'checkbox'}
	      ,{field: 'id', title: 'ID', width:80,sort: true}
	      ,{field: 'card_no', width:80, title: '会员卡号'}
	      ,{field: 'name',width:80,title: '姓名'}
	      ,{field: 'sex',width:80,title: '性别'}
	      ,{field: 'category', title: '身份'}
	      ,{field: 'card', title: '身份证号'}
	      ,{field: 'department', width:120, title: '系部'}
	      ,{field: 'profession',width:120, title: '专业'}
	      ,{field: 'grade',width:80, title: '年级'}
	      ,{field: 'phone',width:120, title: '电话'}
	      ,{field: 'regdate', title: '入会时间'}
	      ,{field: 'status',width:80, title: '状态',templet:function(d){
				if(d.status ==0)
				return '未在资源室'  
				else
				return d.status
				}}
	      ,{field: 'remark', title: '备注'}
	      ,{fixed: 'right',title: '操作', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
	    ]]
	  });
	  
	  laydate.render({
		    elem: '#beginRegdate'
		    ,type: 'datetime'
		  }); 
	  laydate.render({
		    elem: '#endRegdate'
		    ,type: 'datetime'
		  });
		  laydate.render({
		    elem: '#regdate'
		    ,type: 'datetime'
		  });
		  
		  //查询页面(身份是老师时 系,专业,班级隐藏)
		  form.on('select(categorys)', function(data){
			  var cg = $("#category").val();
			  if(cg == "1" ){
			  	$("#departmentss").hide();
			  	$("#departments").hide();
			  	$("#professionss").hide();
			  	$("#professions").hide();
			  	$("#gradess").hide();
			  	$("#grades").hide();
			  } else {
			  	$("#departmentss").show();
			  	$("#departments").show();
			  	$("#professionss").show();
			  	$("#professions").show();
			  	$("#gradess").show();
			  	$("#grades").show();
			  }
		}); 
		
		//添加页面(身份是老师时 系,专业,班级隐藏)
		form.on('select(categoryaad)', function(data){
			   var cga = $("#categorya").val();
			  if(cga == "1"){
			  	$("#departmentaa").hide();
			  	$("#departmenta").hide();
			  	$("#professionaa").hide();
			  	$("#professiona").hide();
			  	$("#gradeaa").hide();
			  	$("#gradea").hide();
			  } else {
			  	$("#departmentaa").show();
			  	$("#departmenta").show();
			  	$("#professionaa").show();
			  	$("#professiona").show();
			  	$("#gradeaa").show();
			  	$("#gradea").show();
			  }
		}); 
		  
		 //查询
		form.on('submit(chaxun)', function(data){
		  table.reload('tableTab', {
			  where: {
				  name:$("#name").val(),
				  card_no:$("#card_no").val(),
				  department:$("#department").val(),
				  profession:$("#profession").val(),
				  grade:$("#grade").val(),
				  phone:$("#phone").val(),
				  beginRegdate:$("#beginRegdate").val(),
				  endRegdate:$("#endRegdate").val(),
				  status:$("#status").val(),
				  category:$("#category").val()
			  } //设定异步数据接口的额外参数
			  //,height: 300
			});
		  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
		});
		//添加
		form.on('submit(tianjia)', function(data) {
			 $("#add_form")[0].reset();
			layer.open({	           
				type : 1,
				content : $("#add_div"),
				area : ['700px','700px']
			});
		});
		//提交添加
		form.on('submit(add)', function(data) {
			$.post("selMemberByCard_noAndCard",{card_no:$("#card_nos").val(),card:$("#cards").val()},function(res) {		
				if (res.code == "1") {
					$.post("addMenber", $("#add_form").serialize(),function(res) {		
						if (res.code == "0") {
							layer.msg(res.msg,{icon:1,time:2000});
							layer.closeAll();
							table.reload("tableTab");
						}else{
							layer.msg(res.msg,{icon:1,time:2000});
						}
					}, "json");
				}else{
					layer.msg(res.msg,{icon:1,time:2000});
				}
			}, "json");
			
		});
		//修改
		form.on('submit(update)', function(data) {
			$.post("updateMenber", $("#update_form").serialize(),function(res) {		
					if (res.code == "0") {
						layer.msg(res.msg,{icon:1,time:2000});
						layer.closeAll();
						table.reload("tableTab");
						}else{
							ayer.msg(res.msg,{icon:1,time:2000});
						  }
					}, "json");
		});  
		   //监听工具条 
		   table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	
			console.log(data);
			if (layEvent === 'detail') { //重置
				layer.confirm('确定要重置该会员状态么?', function(index) {
					$.post("updateStatusOutById", {
					id : data.id
					}, function(res) {
						if (res.success) {
							layer.msg(res.msg, {
							icon : 1,
							time : 2000
							});	
							table.reload("tableTab");
						} else {
							layer.msg(res.msg, {
								icon : 1,
								time : 2000
							});
						}
						table.reload("tableTab");
					}, "json");
				});
			} else if (layEvent === 'del') { //删除
			layer.confirm('真的删除行么', function(index) {
				$.post("delMenber", {
					id : data.id
				}, function(res) {
					if (res.success) {
						layer.msg(res.msg, {
						icon : 1,
						time : 2000
						});
					$(obj).parents("tr").remove();
					} else {
						layer.msg(res.msg, {
						icon : 1,
						time : 2000
						});
					}
					table.reload("tableTab");
				}, "json");
			});
			} else if (layEvent === 'edit') { //编辑
				form.val("update_form",data);
				layer.open({
					type : 1,
					content : $("#update_div"),
					area : ['700px','700px']
				});
										
			} 
		});
		
		
		
		//导出文件
	    form.on('submit(daoChu)',function(){
	      	window.location.href='http://localhost:8080/export';
	    })
	});
		//批量删除提交
        function delMenbers() {
           var checkStatus = table.checkStatus('tableTab');
           //获取选中数量
           var selectCount = checkStatus.data.length;
           if(selectCount == 0){
              layer.msg('批量删除至少选中一项数据',function(){});
              return false;
           }
           var ids=[];
           for(var i=0; i<selectCount; i++){
              var id=checkStatus.data[i].id;
              ids.push(id);
           }
           var idss = ids.join(",");
           console.log(idss);
           layer.confirm('确认要删除吗？',function(index){
           $.post("../delMenbers",{
               ids:idss
           },function(res){
	           if(res.code==0){
	               layer.closeAll();
		        	layer.msg("删除成功!");
		        	table.reload('tableTab');
	           }
           },"json")
         });
      }
</script>
</body>
</html>